<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>积分商城</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <link rel="stylesheet" href="../css/swiper.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/swiper.jquery.min.js"></script>
    <style>
        .swiper-slide{width: 100%;height: 200px;background-size: contain;background-position: center;background-repeat: no-repeat;}
        .swiper-pagination-bullet{background-color: #aeaeae;opacity: .4;}
        .swiper-pagination-bullet-active{background-color: #ffc10c;opacity: 1;}

        .s-head{padding: 0 15px;overflow: hidden;line-height: 45px;border-top: 4px solid #eeedf3;border-bottom: 4px solid #eeedf3;}
        .s-head .left{float: left;font-size: 14px;}
        .s-head .left .name{color: #333;}
        .s-head .left .lottery{color: #fff;display: inline-block;background-color: #ffc10c;line-height: normal;
            padding: 3px;border-radius: 3px;}
        .s-head .right{float: right;color: #ffc10c;}
        .s-head .right i{margin-right: 3px;}

        .detail{padding: 12px;border-bottom: 4px solid #eeedf3;}
        .detail .d-title{color: #333;margin-bottom: 10px;}
        .detail span{font-size: 13px;color: #999;display: block;line-height: 18px;}

        .evaluate{padding: 12px;}
        .evaluate .e-title{font-size: 14px;color: #333;margin-bottom: 10px;}
        .evaluate li{margin-bottom: 10px;}
        .evaluate li .top{overflow: hidden;line-height: 35px;}
        .evaluate li .top .left{float: left;font-size: 13px;color: #444;}
        .evaluate li .top .left i{color: #ffc10c;margin-right: 10px;}
        .evaluate li .top .right{float: right;color: #999;font-size: 12px;}
        .evaluate li p{color: #777;font-size: 12px;line-height: 18px;}

        .footer{height: 50px;}
        .footer .footer-fixed{position: fixed;left: 0;bottom: 0;width: 100%;line-height: 50px;}
        .footer .footer-fixed a{display: block;text-align: center;color: #fff;background-color: #ffc10c;font-size: 18px;}


        .modal1{position: fixed;display: none;left: 0;top: 0;width: 100%;height: 100%;z-index: 9;background-color: rgba(0, 0, 0, 0.50);}
        .modal1 .modal1-box{background-color: #fff;padding: 20px;;position: absolute;left: 10%;right: 10%;top: 50%;transform: translateY(-50%);}
        .modal1 .modal1-box div{text-align: center;color: #666;}
        .modal1 .modal1-box div i{color: #999;font-size: 24px;margin-right: 5px;}
        .modal1 .modal1-box span{position: absolute;right: 5px;top: 5px;font-size: 20px;}
        .modal1 .modal1-box p{color: #999;font-size: 12px;margin-top: 10px;text-align: center;line-height: 16px;}
        .modal1 .modal1-box p b{font-weight: normal;color: #c90000;}
        .modal1 .modal1-box p a{text-decoration: underline;color: #c90000;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
<!--弹出框1-->
<div class="modal1 yes">
    <div class="modal1-box">
        <span class="close">&times;</span>
        <div><i class="iconfont icon-haoping"></i>未中奖！</div>
        <p>很遗憾，您未抽中奖品，请再接再厉。</p>
    </div>
</div>
<div class="modal1 no">
    <div class="modal1-box">
        <span class="close">&times;</span>
        <div><i class="iconfont icon-haoping"></i>恭喜您中奖啦！</div>
        <p>人们都说颜值和运气是成正比的，小主果然棒棒哒，恭喜小主获得了<b>【iphone6s】</b>奖励。<a href="../html/lottery_detail.html">去兑换</a></p>
    </div>
</div>
<header class="header header2">
    <div class="header-fixed">
        <div class="left">
            <a href="javascript:window.history.back();">
                <i class="iconfont icon-arrowleft"></i>
            </a>
        </div>
        <div class="center">积分商城</div>
    </div>
</header>
<div class="content">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url('../img/QQ截图20160617135527.png')"></div>
            <div class="swiper-slide" style="background-image: url('../img/pic_4.png')"></div>
            <div class="swiper-slide" style="background-image: url('../img/pic_4.png')"></div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="s-head">
        <div class="left">
            <span class="name">apple iphone6s</span>
            <span class="lottery">抽奖</span>
        </div>
        <div class="right"><i class="iconfont icon-jifen"></i>1000</div>
    </div>
    <div class="detail">
        <p class="d-title">商品详情</p>
        <span class="d-word">苹果iphone 6s 16g 全网通4G手机 玫瑰金</span>
        <span class="d-word">赠送保护壳+贴膜</span>
    </div>
    <div class="evaluate">
        <p class="e-title">商品评价（20）</p>
        <ul>
            <li>
                <div class="top">
                    <span class="left"><i class="iconfont icon-haoping"></i>好评</span>
                    <span class="right">小明</span>
                </div>
                <p>质量好的没话说，性价比高，送货也快，价格更实惠！</p>
            </li>
            <li>
                <div class="top">
                    <span class="left"><i class="iconfont icon-haoping"></i>好评</span>
                    <span class="right">小明</span>
                </div>
                <p>质量好的没话说，性价比高，送货也快，价格更实惠！</p>
            </li>
            <li>
                <div class="top">
                    <span class="left"><i class="iconfont icon-haoping"></i>好评</span>
                    <span class="right">小明</span>
                </div>
                <p>质量好的没话说，性价比高，送货也快，价格更实惠！</p>
            </li>
        </ul>
    </div>
</div>
<footer class="footer">
    <div class="footer-fixed">
        <a href="javascript: void(0);">立即抽奖</a>
    </div>
</footer>
</body>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        pagination: '.swiper-pagination'
    });
    $('.footer-fixed a').click(function(){
        $('.no').show()
    });
    $('.close').click(function(){
        $('.modal1').hide()
    })
</script>
</html>